var dom = document.getElementById('content-right3');
var myChart = echarts.init(dom, 'dark', {
      renderer: 'canvas',
      useDirtyRect: false
});
var app = {};

var option = {
  color: ['#FFBF00', '#80FFA5', '#37A2FF', '#FF0087'],
  title: {
    text: '我国海域赤潮面积',
    textStyle: {
			    fontSize:14,//加
				//color:white",
				letterSpacing:1
	},
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['黄海', '渤海', '东海', '南海'],
    x:'right',
  },
  toolbox: {
                 show: false, /*启用功能*/
           feature: {
              saveAsImage: {show: false} //下载工具
           }
  },
  grid: {
    left: '3.5%',
    right: '4.5%',
    bottom: '2%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023']
    }
  ],

  yAxis: {
      		name: '面积(平方公里)',
      		type: 'value',
      		// min: 0, // 设置y轴刻度的最小值
      		//max: 1800, // 设置y轴刻度的最大值
      		// splitNumber: 9, // 设置y轴刻度间隔个数
      		axisLine: {
				show: true
      			// lineStyle: {
      			// 	// 设置y轴颜色
      			// 	color: '#87CEFA'
      			// }
      		},
			axisLabel: {
				show: true,
				color: 'white',
				fontSize: 12,
				// formatter: function(value) {
				// 	if (value >= 1000) {
				// 		value = value / 1000 + 'k';
				// 	}
				// 	return value;
				// }
			},
		// 	splitLine: {
		// 		show: false,//true
		// 		lineStyle: {
		// 			color: '#172738',
		// 			width: 1,
		// 			type: 'solid'
		// 		}
		// 	}
      	},

  series: [
    {
      name: '黄海',
      type: 'line',
      //stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.5,

        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])

      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: '渤海',
      type: 'line',
      //stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.5,

        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: '东海',
      type: 'line',
      //stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    },
    {
      name: '南海',
      type: 'line',
      //stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },

  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);